<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div,
        .aa {
            position: absolute;
        }
        
        .myDIV {
            width: 100px;
            height: 100px;
            background-color: red;
            bottom: 0px;
            animation: mymove 9s infinite;
        }
        
        .my2 {
            margin-left: 105px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: orange;
            animation: mymove 7s infinite;
        }
        
        .my3 {
            margin-left: 220px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: yellow;
            animation: mymove 4s infinite;
        }
        
        .my4 {
            margin-left: 330px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: green;
            animation: mymove 6s infinite;
        }
        
        .my5 {
            margin-left: 440px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: cyan;
            animation: mymove 15s infinite;
        }
        
        .my6 {
            margin-left: 550px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: blue;
            animation: mymove 25s infinite;
        }
        
        .my7 {
            margin-left: 650px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: purple;
            animation: mymove 11s infinite;
        }
        
        .my8 {
            margin-left: 750px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: brown;
            animation: mymove 21s infinite;
        }
        
        .my9 {
            margin-left: 800px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: lime;
            animation: mymove 13s infinite;
        }
        
        .my10 {
            margin-left: 900px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: black;
            animation: mymove 25s infinite;
        }
        
        .my11 {
            margin-left: 1000px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: gray;
            animation: mymove 35s infinite;
        }
        
        .my12 {
            margin-left: 1100px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: gold;
            animation: mymove 52s infinite;
        }
        
        .my13 {
            margin-left: 1200px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: #ccc;
            animation: mymove 45s infinite;
        }
        
        .my14 {
            margin-left: 1305px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: #f00;
            animation: mymove 15s infinite;
        }
        
        .my15 {
            margin-left: 1105px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: pink;
            animation: mymove 25s infinite;
        }
        
        .my16 {
            margin-left: 45px;
            float: right;
            width: 100px;
            height: 100px;
            bottom: 0px;
            background-color: silver;
            animation: mymove 52s infinite;
        }
        
        .my17 {
            margin-left: 105px;
            float: right;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            bottom: 0px;
            background-color: pink;
            animation: mymove 5s infinite;
        }
        
        .my18 {
            margin-left: 305px;
            float: right;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            bottom: 0px;
            background-color: gold;
            animation: mymove 15s infinite;
        }
        
        .my19 {
            margin-left: 555px;
            float: right;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            bottom: 0px;
            background-color: orange;
            animation: mymove 16s infinite;
        }
        
        .my20 {
            margin-left: 885px;
            float: right;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            bottom: 0px;
            background-color: purple;
            animation: mymove 52s infinite;
        }
        
        .my21 {
            margin-left: 105px;
            float: right;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            bottom: 0px;
            background-color: yellow;
            animation: mymove 26s infinite;
        }
        
        .my22 {
            margin-left: 955px;
            float: right;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            bottom: 0px;
            background-color: pink;
            animation: mymove 33s infinite;
        }
        
        .my33 {
            margin-left: 105px;
            float: right;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            bottom: 0px;
            background-color: pink;
            animation: mymove 24s infinite;
        }
        
        .my34 {
            margin-left: 366px;
            float: right;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            bottom: 0px;
            background-color: purple;
            animation: mymove 35s infinite;
        }
        
        .my35 {
            margin-left: 885px;
            float: right;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            bottom: 0px;
            background-color: green;
            animation: mymove 50s infinite;
        }
        
        .my23 {
            margin-left: 25px;
            float: right;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 60px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            bottom: 0px;
            background-color: purple;
            animation: mymove 35s infinite;
        }
        
        .my24 {
            margin-left: 258px;
            float: right;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 60px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            bottom: 0px;
            background-color: purple;
            animation: mymove 36s infinite;
        }
        
        .my25 {
            margin-left: 450px;
            float: right;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 60px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            bottom: 0px;
            background-color: purple;
            animation: mymove 37s infinite;
        }
        
        .my26 {
            margin-left: 540px;
            float: right;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 60px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            bottom: 0px;
            background-color: purple;
            animation: mymove 38s infinite;
        }
        
        .my27 {
            margin-left: 790px;
            float: right;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 60px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            bottom: 0px;
            background-color: purple;
            animation: mymove 39s infinite;
        }
        
        .my28 {
            margin-left: 1000px;
            float: right;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 60px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            bottom: 0px;
            background-color: purple;
            animation: mymove 40s infinite;
        }
        
        .my29 {
            margin-left: 1130px;
            float: right;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 60px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            bottom: 0px;
            background-color: purple;
            animation: mymove 39s infinite;
        }
        
        .my30 {
            margin-left: 1242px;
            float: right;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 60px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            bottom: 0px;
            background-color: purple;
            animation: mymove 38s infinite;
        }
        
        .my31 {
            margin-left: 183px;
            float: right;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 60px;
            color: #f00;
            text-align: center;
            border-radius: 50%;
            bottom: 0px;
            background-color: white;
            animation: mymove 22s infinite;
        }
        
        .my32 {
            margin-left: 675px;
            float: right;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 60px;
            color: #f00;
            text-align: center;
            border-radius: 50%;
            bottom: 0px;
            background-color: white;
            animation: mymove 23s infinite;
        }
        
        .aa {
            display: inline-block;
            background-color: #000;
            color: #fff;
            text-align: center;
            border: 1px solid #00f;
            text-decoration: none;
            border-radius: 50%;
            padding: 4px;
            margin-left: 50%;
            bottom: 0;
            animation: mymove 23s infinite;
        }
        
        .aa:hover {
            background-color: #f00;
            color: rgb(0, 255, 34);
        }
        
        @keyframes mymove {
            50% {
                bottom: 1250px;
            }
        }
    </style>

</head>

<body>
    <div class="myDIV"></div>
    <div class="my2"></div>
    <div class="my3"></div>
    <div class="my4"></div>
    <div class="my5"></div>
    <div class="my6"></div>
    <div class="my7"></div>
    <div class="my8"></div>
    <div class="my9"></div>
    <div class="my10"></div>
    <div class="my11"></div>
    <div class="my12"></div>
    <div class="my13"></div>
    <div class="my14"></div>
    <div class="my15"></div>
    <div class="my16"></div>
    <div class="my17"></div>
    <div class="my18"></div>
    <div class="my19"></div>
    <div class="my20"></div>
    <div class="my21"></div>
    <div class="my22"></div>
    <div class="my23">把</div>
    <div class="my24">握</div>
    <div class="my25">现</div>
    <div class="my26">在</div>
    <div class="my27">不</div>
    <div class="my28">失</div>
    <div class="my29">未</div>
    <div class="my30">来</div>
    <div class="my31">冲</div>
    <div class="my32">鸭</div>
    <div class="my33"></div>
    <div class="my34"></div>
    <div class="my35"></div>
    <a href="star.html" class="aa">前行</a>
</body>

</html>